<template>
  <h3>基础控件</h3>
  <div class="control-list">
    <div class="control-item" draggable="true" @dragstart="(event) => onDragStart(event, 'text-input')" @dragend="onDragEnd">
      单行文本<el-icon><Edit /></el-icon> 
    </div>
    <div class="control-item" draggable="true" @dragstart="(event) => onDragStart(event, 'textarea')" @dragend="onDragEnd">
      多行文本<el-icon><Document /></el-icon> 
    </div>
    <div class="control-item" draggable="true" @dragstart="(event) => onDragStart(event, 'select')" @dragend="onDragEnd">
      下拉选择<el-icon><ArrowDown /></el-icon> 
    </div>
    <div class="control-item" draggable="true" @dragstart="(event) => onDragStart(event, 'radio')" @dragend="onDragEnd">
      单选<el-icon><Guide /></el-icon> 
    </div>
    <div class="control-item" draggable="true" @dragstart="(event) => onDragStart(event, 'checkbox')" @dragend="onDragEnd">
      勾选<el-icon><Select /></el-icon> 
    </div>
    <div class="control-item" draggable="true" @dragstart="(event) => onDragStart(event, 'checkbox-group')" @dragend="onDragEnd">
      多选<el-icon><CopyDocument /></el-icon> 
    </div>
    <div class="control-item" draggable="true" @dragstart="(event) => onDragStart(event, 'signature')" @dragend="onDragEnd">
      签署区<el-icon><Brush /></el-icon> 
    </div>
    </div>
</template>

<script setup>
import { Edit, Brush, Select, Document, ArrowDown, Guide, CopyDocument } from '@element-plus/icons-vue';

const emit = defineEmits(['drag-start']);

const onDragStart = (event, type) => {
  event.dataTransfer.setData('text/plain', type); // 设置拖动数据
  
  // 设置全局变量，供PDFEditor.vue使用
  window.draggingControlType = type;
  
  emit('drag-start', type);
};

const onDragEnd = (event) => {
  // 延迟清除拖拽状态，给其他事件处理器时间执行
  setTimeout(() => {
    if (window.draggingControlType) {
      window.draggingControlType = null;
    }
  }, 500);
};
</script>

<style scoped>
h3 {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}
.control-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.control-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: grab;
  background-color: #fff;
  transition: all 0.2s;
  user-select: none;
}
.control-item:hover {
  border-color: #409eff;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.2);
}
.control-item .el-icon {
  margin-left: 8px;
}
</style>